<template>
    <el-dialog v-model="dialogVisible" title="创建文件" width="500">
        <el-input ref="fileNameInputRef" v-model="fileName" placeholder="请输入文件名"
                  @keydown.enter="handleSubmit"></el-input>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleCancel">取消</el-button>
                <el-button type="primary" @click="handleSubmit">创建</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import {computed, nextTick, ref} from "vue";
import {createNewFile, getFolderFileList, updateFileList} from "../utils/clientControl.js"
import {useFileStore} from "../store/fileStore.js";
import {listToTree} from "../utils/utils.js";

const fileStore = useFileStore();
const props = defineProps({
    open: Boolean,
    path: String
})

const emit = defineEmits(['update:open']);

const fileNameInputRef = ref(null);

const dialogVisible = computed({
    get() {
        if (props.open) {
            nextTick(() => {
                fileName.value = '';
                fileNameInputRef.value.focus();
            })
        }
        return props.open;
    },
    set(val) {
        return emit('update:open', val);
    }
})

const fileName = ref('');

/** 创建文件 */
const handleSubmit = async () => {
    dialogVisible.value = false;
    await createNewFile(fileName.value, props.path);
    await updateFileList(fileStore.fileRootPath);
}
/** 取消 */
const handleCancel = () => {
    fileName.value = '';
    dialogVisible.value = false;
}
</script>